<script>
import propertyList from '@/utils/propertyList.js';
import template1 from './template1.vue';
import template2 from './template2.vue';
import template3 from './template3.vue';
import template4 from './template4.vue';
import template5 from './template5.vue';
// #ifdef MP || APP-PLUS
import topBar from '../topBar.vue';
// #endif
import {postSignUser} from '@/api/user.js';
export default {
	components: {
		template1,
		template2,
		template3,
		template4,
		template5,
		// #ifdef MP || APP-PLUS
		topBar
		// #endif
	},
	props: {
		userInfo: {
			type: Object,
			default: () => {}
		},
		memberData: {
			type: Object,
			default: () => {}
		},
		orderAdminData: {
			type: Object,
			default: () => {}
		},
		isScrolling: {
			type: Boolean,
			default: false
		},
		balanceStatus: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			property: [],
			integralInfo: {
				integral: 0,
				sum_integral: 0,
				deduction_integral: 0,
				frozen_integral: 0
			}
		};
	},
	watch: {
		memberData: {
			handler(nVal, oVal) {
				this.$nextTick((e) => {
					this.getPropertyArr(nVal.property);
				});
			},
			immediate: true,
			deep: true
		},
		userInfo: {
			handler(nVal, oVal) {
				this.$nextTick((e) => {
					this.getPropertyArr(this.memberData.property);
				});
			},
			deep: true
		}
	},
	inject: ['intoPage'],
	mounted() {
		// this.getUserInfo()
	},
	methods: {
		getPropertyArr(arr) {
			let data = [];
			const propertyFilter = propertyList.filter((item) => {
				return arr.includes(item.value);
			});

			propertyFilter.forEach((item) => {
				if ((item.value == 0 && this.balanceStatus) || item.value != 0) {
					data.push({
						...item,
						value: this.userInfo[item.k]
					});
				}
			});
			const filteredItems = data.filter(item => {
			  if (this.userInfo.is_promoter === 0 && ['spread_user_count','brokerage_price','spread_order_count'].includes(item.k)) {
			    return false;
			  }
			  return true;
			});
			this.property = filteredItems;
			
		},
		getUserInfo: function() {
			let that = this;
			postSignUser({
				sign: 1,
				integral: 1,
				all: 1
			}).then(function(res) {
				that.$set(that, 'integralInfo', res.data);
			});
		}
	}
};
</script>

<template>
	<view>
		<!-- #ifdef MP || APP-PLUS -->
		<topBar v-if="memberData.style != 5" :styleType="memberData.style" :isScrolling="isScrolling"></topBar>
		<!-- #endif -->
		<template1 v-if="memberData.style == 1" :perShowType="memberData.per_show_type" :userInfo="userInfo" :property="property"></template1>
		<template2 v-if="memberData.style == 2" :perShowType="memberData.per_show_type" :userInfo="userInfo" :property="property"></template2>
		<template3 v-if="memberData.style == 3" :perShowType="memberData.per_show_type" :userInfo="userInfo" :property="property"></template3>
		<template4 v-if="memberData.style == 4" :perShowType="memberData.per_show_type" :userInfo="userInfo" :commission="orderAdminData.commission"></template4>
		<template5
			v-if="memberData.style == 5"
			:perShowType="memberData.per_show_type"
			:userInfo="userInfo"
			:commission="orderAdminData.commission"
			:isScrolling="isScrolling"
			:property="property"
		></template5>
		
		<view class='nav'>
			<view class="acea-row row-middle row-between">
				<view class="title acea-row row-middle">
					<text class="name">积分详情</text>
					<text @tap="intoPage('/pages/users/user_integral_detail/index')" hover-class="none">
						积分明细<text class="iconfont icon-ic_rightarrow"></text>
					</text>
				</view>
				<!-- <view class="right">
					<image src="/static/img/mall05.png"></image>
					<text>我的积分</text>
					<text class="integral">{{ integralInfo.integral }}</text>
				</view> -->
			</view>
			<view class="list acea-row row-middle row-around">
				<view class='item'>
					<view class='num'>{{userInfo.company ? userInfo.company.score : 0}}</view>
					<view>积分余额</view>
				</view>
				<view class="line"></view>
				<view class='item'>
					<view class='num'>{{userInfo.company ? userInfo.company.total_score : 0}}</view>
					<view>累计积分</view>
				</view>
				<view class="line"></view>
				<view class='item'>
					<view class='num'>{{userInfo.company ? userInfo.company.total_dec_score : 0}}</view>
					<view>累计消费</view>
				</view>
				<!-- <view class="line"></view>
				<view class='item'>
					<view class='num'>{{integralInfo.frozen_integral}}</view>
					<view>冻结积分</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<style lang="scss">
/deep/ .bind-phone {
	margin-top: 12rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	width: max-content;
	text-align: center;
	font-size: 20rpx;
	font-weight: 400;
	color: #ffffff;
	line-height: 28rpx;
	padding: 6rpx 16rpx;
}
/deep/ .tips::before {
	content: '';
	position: absolute;
	bottom: -6rpx;
	left: calc(50% - 6rpx);
	width: 0;
	height: 0;
	border-left: 6rpx solid transparent;
	border-right: 6rpx solid transparent;
	border-top: 6rpx solid #ffd89c; /* 修改颜色以改变三角形颜色 */
}
	.nav {
		background-image: url('~@/static/img/integralBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 710rpx;
		height: 240rpx;
		margin: -160rpx auto 0;
		position: relative;
		z-index: 9;
		
		.title{
			flex: 1;
			font-size: 22rpx;
			color: var(--view-theme);
			padding-top: 18rpx;
			margin-left: 32rpx;
			
			.name{
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				margin-right: 16rpx;
			}
			
			.iconfont{
				font-size: 24rpx;
			}
		}
		.right {
			flex: 1;
			display: flex;
			align-items: center;
			padding-left: 50rpx;
			color: #fff;
			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 10rpx;
			}
			.integral {
				font-size: 36rpx;
				margin-left: 20rpx;
				font-family: "SemiBold";
			}
		}
		
		.list{
			margin-top: 48rpx;
			.item{
				color: #999999;
				font-size: 24rpx;
				text-align: center;
				width: 33%;
				.num{
					color: #333333;
					font-size: 40rpx;
					margin-top: 14rpx;
					font-family: "SemiBold";
					margin-bottom: 5px;
				}
			}
			.line{
				width: 1px;
				height: 42rpx;
				background-color: #DDDDDD;
			}
		}
	}
</style>
